<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../../layui/css/layui.css">
<!--    <link rel="stylesheet" href="../../style/home.css">-->
</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">




    <div >
        <!-- 内容主体区域 -->
        <div style="padding: 15px;">
            <div class="layui-inline searchBox">
                <div class="layui-input-inline">
                    <label class="layui-form-label">会员搜索</label>
                </div>
                <div class="layui-input-inline">
                    <input type="text" placeholder="昵称/手机号码"  class="layui-input searchInp">
                </div>
                <div class="layui-input-inline">
                    <button type="button" class="layui-btn layui-btn-normal searchBtn">搜索</button>

                </div>
                <button style="" type="button" class="layui-btn  addBoxBtn">新增</button>
            </div>
            <div>
                <table class="layui-table">
                    <colgroup>
                        <col width="80">
                        <col width="200">
                        <col width="200">
                        <col width="200">
                        <col>
                    </colgroup>
                    <thead>
                        <tr>
                            <th>序号</th>
                            <th>姓名</th>
                            <th>电话</th>
                            <th>注册时间</th>
                            <th>状态</th>
                        </tr>
                    </thead>
                    <tbody class="tab">
                        <!--<tr>
                            <td>1</td>
                            <td>姓名</td>
                            <td>18777772222</td>
                            <td class="">
                                <div class="layui-form ">
                                    <input type="checkbox" name="switch" lay-skin="switch">
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td>1</td>
                            <td>姓名</td>
                            <td>18777772222</td>
                            <td class="">
                                <div class="layui-form ">
                                    <input type="checkbox" name="switch" lay-skin="switch">
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td>1</td>
                            <td>姓名</td>
                            <td>18777772222</td>
                            <td class="">
                                <div class="layui-form ">
                                    <input type="checkbox" name="switch" lay-skin="switch">
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td>1</td>
                            <td>姓名</td>
                            <td>18777772222</td>
                            <td class="">
                                <div class="layui-form ">
                                    <input type="checkbox" name="switch" lay-skin="switch">
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td>1</td>
                            <td>姓名</td>
                            <td>18777772222</td>
                            <td class="">
                                <div class="layui-form ">
                                    <input type="checkbox" name="switch" lay-skin="switch">
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td>1</td>
                            <td>姓名</td>
                            <td>18777772222</td>
                            <td class="">
                                <div class="layui-form ">
                                    <input type="checkbox" name="switch" lay-skin="switch">
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td>1</td>
                            <td>姓名</td>
                            <td>18777772222</td>
                            <td class="">
                                <div class="layui-form ">
                                    <input type="checkbox" name="switch" lay-skin="switch">
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td>1</td>
                            <td>姓名</td>
                            <td>18777772222</td>
                            <td class="">
                                <div class="layui-form ">
                                    <input type="checkbox" name="switch" lay-skin="switch">
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td>1</td>
                            <td>姓名</td>
                            <td>18777772222</td>
                            <td class="">
                                <div class="layui-form ">
                                    <input type="checkbox" name="switch" lay-skin="switch">
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td>1</td>
                            <td>姓名</td>
                            <td>18777772222</td>
                            <td class="">
                                <div class="layui-form ">
                                    <input type="checkbox" name="switch" lay-skin="switch">
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td>1</td>
                            <td>姓名</td>
                            <td>18777772222</td>
                            <td class="">
                                <div class="layui-form ">
                                    <input type="checkbox" name="switch" lay-skin="switch">
                                </div>
                            </td>
                        </tr>-->
                    </tbody>
                </table>
            </div>
            <div id="page">

            </div>
        </div>
        <div class="layui-footer">
            <!-- 底部固定区域 -->
            ©华联商城
        </div>
    </div>
</div>

<div id="addBox">
    <form class="layui-form" action="">
        <div class="layui-form-item">
            <label class="layui-form-label">姓名</label>
            <div class="layui-input-block">
                <input type="text" name="title" required  lay-verify="required phone"  autocomplete="off" class="layui-input addName">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">联系方式</label>
            <div class="layui-input-block">
                <input type="text" name="title" required  lay-verify="required"  autocomplete="off" class="layui-input addPhone">
            </div>
        </div>
    </form>
</div>
</body>

</html>
<script src="../../utils/jquery-3.1.1.min.js"></script>
<script src="../../layui/layui.js"></script>
<script src="../../utils/baseUrl.js"></script>
<script>
    $('.userName').html(window.localStorage.getItem('user'));
    $('.exit').click(function () {
        window.localStorage.removeItem('user');
        window.localStorage.removeItem('auth');
        window.location.href='../admin/login.html';
    });

    var page=1;
    var count=0;

    layui.use('element', function(){
        var element = layui.element;
    });
    var laypage;
    layui.use('laypage', function(){
        laypage = layui.laypage;
    });
    layui.use('layer', function(){
        var layer = layui.layer;

        $('.addBoxBtn').on('click',function () {
            layer.open({
                type: 1,
                title:'新增工作人员',
                content: $('#addBox'),
                area:['600px','300px'],
                offset:'auto',
                btn:'新增',
                yes:function (index) {
                    if($('.addName').val().trim()==''){
                        layer.msg('姓名不能为空！');
                        return false;
                    }
                    if($('.addPhone').val().trim()==''){
                        layer.msg('手机号不能为空！');
                        return false;
                    }
                    if(!/^1[3-9]\d{9}$/.test($('.addPhone').val())){
                        layer.msg('请输入正确的手机号！');
                        return false;
                    }

                    /*if(!window.localStorage.getItem('auth')){
                        window.location.href='/';
                        return false;
                    }*/

                    $.ajax({
                        method:'post',
                        headers:{
   //                         'content-type':'application/json',
                            'handlerType':'add'
                            //'auth':window.localStorage.getItem('auth')
                        },
                        url:baseUrl+'/mgr',
                        data:{formData:JSON.stringify({
                            name:$('.addName').val(),
                            phone:$('.addPhone').val()
                        })},
                        success:function (res) {
                            console.log(res);
                            if(res.code==1){
                                layer.close(index);
                                $('.addName').val('');
                                $('.addPhone').val('');
                                getCon();
                            }else if(res.code==500){
                                layer.msg('登录信息已经过期');
                                setTimeout(function () {
                                    window.location.href='/';
                                },1000)
                            }
                        }
                    });
                }//这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响
            });
        })

    });
    var form
    layui.use('form', function(){
        form = layui.form;
    });

    /*获取数据*/
    function getCon(){
        /*if(!window.localStorage.getItem('auth')){
            window.location.href='/';
            return false;
        }*/
        $.ajax({
            method:'post',
            headers:{
                handlerType:'getList'
               // 'auth':window.localStorage.getItem('auth')
            },
            url:baseUrl+'/mgr?page='+page+'&name='+$('.searchInp').val(),
            success:function (res) {
                console.log(res)
                if(res.code==1){
                    $('.tab').html('');
                    count=res.count;
                    for(var i=0;i<res.data.length;i++){

                        $('.tab').append(`
                            <tr data-id="${res.data[i].id}">
                                <td>${i+1}</td>
                                <td class="dataName">${res.data[i].name}</td>
                                <td class="dataPhone">${res.data[i].phone}</td>
                                <td class="dataTime">${res.data[i].regTime}</td>
                                <td>
                                    <form class="layui-form">
                                        <a href="javascript:;" class="shanchu">删除</a>
                                        <input class="shangxiajia" ${res.data[i].inUsed==true?"checked":""} value="${res.data[i].inUsed==true}" type="checkbox" name="zzz" lay-skin="switch" lay-text="启用|冻结">
                                    </form>
                                </td>
                            </tr>
                        `)

                    }
                    form.render();
                    if(count>10){
                        laypage.render({
                            elem: 'page' //注意，这里的 test1 是 ID，不用加 # 号
                            ,count: count //数据总数，从服务端得到
                            ,curr:page
                            ,jump:function (obj,first) {
                                console.log('first',first)
                                if(!first){
                                    console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。
                                    console.log(obj.limit); //得到每页显示的条数
                                    page=obj.curr;
                                    getCon();
                                }
                            }
                        });
                    }
                }
                else if(res.code==500){
                    layer.msg('登录信息已经过期');
                    setTimeout(function () {
                        window.location.href='/';
                    },1000)
                }
            }
        });
    }
    /*页面加载后加载数据*/
    $(function () {
        getCon();
    });
    /*点击搜索的时候*/
    $('.searchBtn').click(function () {
        page=1;
        getCon();
        $('.searchInp').val('');
    })

    /*启用/冻结 */
    $('.tab').on('click','.layui-form-switch',function (ev) {
        var inUsed=$(ev.target).parents('.layui-form').find('.shangxiajia').val();
        var phone=$(ev.target).parents('tr').find('.dataPhone').html();
        if(window.localStorage.getItem('auth')){
            window.location.href='/static/html/mgr/mgrList.html';
            return false;
        }
        $.ajax({
            method:'post',
            url:baseUrl+'/mgr',
            headers:{
                handlerType:'update',
               // 'auth':window.localStorage.getItem('auth')
            },
            data:{
                phone:phone,
                use:inUsed=='true'?0:1
            },
            success:function (res) {
                if(res.code==1){

                    getCon();
                }else if(res.code==500){
                    layer.msg('登录信息已经过期');
                    setTimeout(function () {
                        window.location.href='/';
                    },1000)
                }
            }
        });
    })

    /*删除*/
    $('.tab').on('click','.shanchu',function (ev) {
        var obj=$(ev.target).parents('tr')
        layer.confirm('您确定要删除吗？', {
            btn: ['确定','取消'] //按钮
        }, function(index){
            /*if(!window.localStorage.getItem('auth')){
                window.location.href='/';
                return false;
            }*/
            $.ajax({
                url:baseUrl+'/mgr',
                headers:{
                    handlerType:'delete'
                    //'auth':window.localStorage.getItem('auth')
                },
                method:'post',
                data:{
                    phone:obj.find('.dataPhone').html()
                },
                success:function (res) {
                    if(res.code==1){

                        getCon();
                        layer.close(index);
                    }else if(res.code==500){
                        layer.msg('登录信息已经过期');
                        setTimeout(function () {
                            window.location.href='/';
                        },1000)
                    }
                }
            })

        });
    });
</script>